<template>
	<view class="container">
		
		<tui-list-view color="#777" title="房间信息" style="margin: 0 30rpx;padding-top: 10rpx;" >
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">管理区</text>
					<view class="tui-right">{{repair.roomInfo.uptown}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">楼号</text>
					<view class="tui-right">{{repair.roomInfo.building}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">单元</text>
					<view class="tui-right">{{repair.roomInfo.unit}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">房号</text>
					<view class="tui-right">{{repair.roomInfo.roomNo}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">房间编码</text>
					<view class="tui-right">{{repair.roomInfo.roomId}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">缴费状态</text>
					<view class="tui-right">{{repair.roomInfo.paymentStatus}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		
		
		<tui-card :title="repairContentTitle" style="padding-top: 10rpx;">
			<template v-slot:body>
				<view class="tui-default">
					{{repair.repairContent}}
				</view>
			</template>
		</tui-card>
		<tui-list-view color="#777" style="margin: 0 30rpx;">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">报修地址</text>
					<view class="tui-right">{{repair.repairPlace}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<tui-list-view color="#777" style="margin: 0 30rpx;">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">联系人</text>
					<view class="tui-right">{{repair.userName}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<tui-list-view color="#777" style="margin: 0 30rpx;">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">报修电话</text>
					<view class="tui-right" @tap="openCall">
						{{repair.telephone}}
						<tui-icon name="voipphone" :size="16" style="margin-left: 10px;"></tui-icon>
					</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<tui-list-view color="#777" style="margin: 0 30rpx;">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">报修时间</text>
					<view class="tui-right">{{repair.addDate}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<!-- 报修图片 -->
		<view>
			<text class="tui-list-cell_name"
				style="background-color:#fff;margin: 0 15px;justify-content:left;padding-left: 14px;">报修图片</text>
			<view class="pic-box" style="background-color: #fff;margin: 0 15px;">
				<view class="pic-item" v-for="(item, index) in repair.fileList" :key="index">
					<image :src="item.filePath" @tap="previewPic" :data-urls="item.filePath"></image>
				</view>
			</view>
		</view>

		<!-- 维修信息 -->
		<tui-card :title="maintenanceResult" v-if="repair.maintenanceResult" style="padding-top: 10rpx;">
			<template v-slot:body>
				<view class="tui-default">
					{{repair.maintenanceResult}}
				</view>
			</template>
		</tui-card>
		<tui-list-view color="#777" style="margin: 0 30rpx;">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">维修状态</text>
					<view class="tui-right">{{repair.statusName}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<tui-list-view color="#777" style="margin: 0 30rpx;" v-if="repair.maintenanceMan">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">维修人员</text>
					<view class="tui-right">{{repair.maintenanceMan}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<tui-list-view color="#777" style="margin: 0 30rpx;" v-if="repair.maintenanceDate">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">维修时间</text>
					<view class="tui-right">{{repair.maintenanceDate}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<!-- 维修图片 -->
		<view>
			<text v-if="repair.fileListOfMaintenance.size >0" class="tui-list-cell_name"
				style="background-color:#fff;margin: 0 15px;justify-content:left;padding-left: 14px;">维修图片</text>
			<view class="pic-box" style="background-color: #fff;margin: 0 15px;">
				<view class="pic-item" v-for="(item, index) in repair.fileListOfMaintenance" :key="index">
					<image :src="item.filePath" @tap="previewPic" :data-urls="item.filePath"></image>
				</view>
			</view>
		</view>
		<tui-list-view color="#777" v-if="repair.fileListOfMaintenance.size >0"></tui-list-view>
		<view class="fb-mobile" style="margin: 0 15px;">
			<view class="label" style="background-color: #fff;padding-left: 15px;color: #999;font-size: 15px;">报修状态
			</view>
			<view class="mobile-box">
				<tui-radio-group name="报修状态" v-model="gcstatus">
					<block v-for="(item,index) in radioItems" :key="index">
						<tui-list-cell @click="selectOpen(item,index)">
							<view class="thorui-align__center" style="padding-left: 35px;">
								<tui-radio :checked="item.checked" :value="item.value" color="#07c160"
									borderColor="#999"></tui-radio>
								<text class="tui-text" style="margin-left: 10px;">{{item.name}}</text>
							</view>
						</tui-list-cell>
					</block>
				</tui-radio-group>
			</view>

			<view class="fb-mobile"
				style="display: flex;background-color: #fff;padding: 13px 15px;justify-content: space-between;">
				<view class="label" style="color:#999;font-size:15px;">工程部处理人</view>
				<view class="mobile-box">
					<zqs-select :multiple="true" :list="options" label-key="label" value-key="value" @search="searchEvent"
						placeholder=" 请选择处理人" title="选择处理人" clearable v-model="checkUserList"></zqs-select>
				</view>
				<tui-icon name="arrowright" size="23"></tui-icon>
			</view>
			<tui-list-view color="#777">
				<tui-list-cell arrow last="true" @click="show(4)">
					<view class="tui-item-box">
						<text class="tui-list-cell_name">处理时间</text>
						<view class="tui-right" style="color: #333333;">{{result}}</view>
					</view>
				</tui-list-cell>
			</tui-list-view>
			<view class="pic-box" style="background-color: #fff;margin-top: 0;">
				<view class="pic-item" v-for="(item, index) in picTempleList" :key="index">
					<image :src="item.url" @tap="previewPic" :data-urls="item.url"></image>
					<text class="pic-delete" @tap="handleDelete" :data-src="item" :data-goods-index="index">x</text>
				</view>
				<view class="pic-item pic-handle" @tap="chooseImageTap" :data-goods-index="num">
					<tui-icon name="camera"></tui-icon>
					<text class="desc">处理图片</text>
				</view>
			</view>
			<tui-textarea style="margin-bottom: 10px;" flexStart placeholder="工程部维修结果"
				v-model="repair.processResult"></tui-textarea>
			<view style="height: 10px;background-color: #EDEDED;"></view>
			<tui-button @click="submitRepair">提交</tui-button>
		</view>
		<tui-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor"
			:color="color" :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="change">
		</tui-datetime>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				repairContentTitle: {
					text: "报修内容"
				},
				maintenanceResult: {
					text: "处理结果"
				},
				repair: {
					repairContent: '', //报修描述
					mobile: '', //手机号
					userName: '', //用户名
					repairId: '', //ID
					fileList: [], //上报图片
					repairPlace: '', //地址
					maintenanceResult: '', // 维修结果
					status: '', //状态 0待派单 1已派单 2已完成 3转工程部 4已取消(电气水暖等原因) 5 转设备部
					maintenanceMan: '', //维修人
					maintenanceResult: '', //维修备注
					mainPicList: [], //维修图片
					processResult: ''
				},
				checkUserList: [],
				options: [],
				picTempleList: [], //处理图片
				tabIndex: 0, // 当前tab的下标
				categoryList: [{
					name: '待处理记录'
				}, {
					name: '处理记录'
				}],
				radioItems: [{
						name: '已完成',
						value: '7',
						checked: false
					},
					{
						name: '已取消(电气水暖等原因)',
						value: '6',
						checked: false
					},
					// {
					// 	name: '转工程部',
					// 	value: '5',
					// 	checked: false
					// },
					// {
					// 	name: '转设备部',
					// 	value: '4',
					// 	checked: false
					// }
				],
				gcstatus: '', //工程部状态
				result: '请选择时间',
				type: 2,
				startYear: 1980,
				endYear: 2030,
				cancelColor: '#888',
				color: '#5677fc',
				setDateTime: '',
				unitTop: false,
				radius: false
			}
		},
		onLoad(e) {
			this.repairId = e.id;
			this.getInfo();
			this.userList();
		},
		methods: {
			/**
			 * 搜索
			 */
			searchEvent(val) {
				console.log('查询事件参数', val)
				// 此处把新的请求值 赋值给options
				if (!val) {
					this.userList();
				} else {
					let newroom = this.options.filter(item => {
						console.log(item.label)
						return item.label.toLowerCase().includes(val.toLowerCase());
					})
					this.options = newroom;
				}
			},
			
			openCall: function() {
				uni.makePhoneCall({
					phoneNumber: this.repair.telephone
				})
			},

			selectOpen(item, index) { //选择项目
				let newObj = this.radioItems;
				let newArray = [];
				for (var i = 0; i < newObj.length; i++) {
					let element = newObj[i];
					if (index == i) {
						element.checked = true;
					} else {
						element.checked = false;
					}
					newArray.push(element);
				}
				this.radioItems = newArray;

			},
			show: function(type) {
				this.cancelColor = '#888';
				this.color = '#5677fc';
				this.setDateTime = '';
				this.startYear = 1980;
				this.endYear = 2030;
				this.unitTop = false;
				this.radius = false;
				setTimeout(() => {
					this.$refs.dateTime.show();
				}, 50)
			},

			change: function(e) {
				//选择的结果
				console.log(e);
				this.result = e.result;
			},

			/**
			 * 人员列表
			 */
			userList: function(e) {
				let that = this;
				let users = [];
				let userInfo = wx.getStorageSync("userInfo");
				let url = "user/userList"; //deptId
				util.request(url, {
					deptId: userInfo.deptId
				}).then(function(res) {
					console.log(res);
					if (res.code === 200) {
						res.data.forEach(element => {
							users.push({
								label: element.label,
								value: element.label
							});
						});
						that.options = users;
					}
				})
			},


			/**
			 * 处理报修
			 */
			submitRepair: function() {
				console.log("---------------------------------")
				let that = this;

				let status = that.gcstatus;
				if (status == '') {
					util.toast('请选择报修状态');
					return false;
				}

				//报修人
				let processUser = '';
				if (that.checkUserList.length > 0) {
					that.checkUserList.forEach(element => {
						processUser = processUser + ',' + element;
					})
				} else {
					util.toast('请选择处理人员');
					return false;
				}


				//报修时间
				let datResutl = "";
				if (that.result == '请选择时间') {
					datResutl = util.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
				} else {
					datResutl = util.formatDate(that.result, 'YYYY-MM-DD HH:mm:ss');
				}
				console.log(datResutl)
				util.request('repair', {
					id: that.repairId,
					processDate: datResutl,
					processResult: that.repair.processResult,
					status: status,
					processUser: processUser,
				}, 'PUT').then(function(res) {
					if (res.code === 200) {
						uni.showModal({
							content: '提交完成！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						})
					}
				});
			},
			detail: function() {
				this.tui.toast('详情功能尚未完善~')
			},

			/**
			 * 获取报修信息
			 */
			getInfo: function(e) {
				let that = this;
				let url = "repair/" + this.repairId;
				util.request(url).then(function(res) {
					if (res.code === 200) {
						that.repair = res.data;
					}
				})
			},
			previewPic(e) {
				let url = e.currentTarget.dataset.urls;
				let urls = [];
				urls.push(url);
				console.log(urls);
				uni.previewImage({
					current: 0,
					urls: urls
				})
			},
			
			/**
			 * 删除图片
			 */
			handleDelete(e) {
				let that = this;
				
				let item = e.currentTarget.dataset.src;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				// const keyVal = e.currentTarget.dataset.value;
				
				util.request("upload/deleteFile", {
					id: item.id
				}).then(function(res) {
					if (res.code === 200) {
						that.picTempleList.splice(goodsIndex,1);
					}
				});
			},
			chooseImageTap: function(e) {
				let that = this;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				uni.showActionSheet({
					itemList: ['从相册中选择', '拍照'],
					itemColor: "#ED3B2F",
					success: function(res) {
						if (!res.cancel) {
							if (res.tapIndex == 0) {
								that.chooseWxImage('album', goodsIndex)
							} else if (res.tapIndex == 1) {
								that.chooseWxImage('camera', goodsIndex)
							}
						}
					}
				})
			},
			chooseWxImage: function(type, goodsIndex) {
				let _this = this;
				let userToken = uni.getStorageSync('token');
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						for (const key in tempFilePaths) {
							uni.uploadFile({
								url: util.interfaceUrl + 'upload/uploadForRepair',
								filePath: tempFilePaths[key],
								name: 'file',
								header: {
									// #ifndef H5
									'content-type': 'multipart/form-data',
									// #endif
									'token': userToken
								},
								formData: {
									repairId: _this.repairId,
									fileType: '2' //0上报 1维修
								},
								success: function(ress) {
									uni.hideLoading();
									let data = JSON.parse(ress.data.replace(/\ufeff/g, "") ||
										"{}")
									console.log(data)
									if (data.code == 200) {
										//返回图片地址
										_this.picTempleList.push(data);
									} else {
										//utils.toast(res.msg);
									}
								},
								fail: function(res) {
									console.log(res);
									//utils.toast("网络不给力，请稍后再试~")
								}
							});
						}
					}
				})
			},
		},
	}
</script>

<style>
	page {
		background: #EDEDED;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-title {
		width: 100%;
		padding: 70rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #666;
	}

	.tui-default {
		padding: 20rpx 30rpx;
		height: 80px;
	}

	.tui-article {
		position: relative;
	}

	.tui-article-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.tui-article-title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}

	.tui-cell-title {
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 10rpx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-cell-img {
		height: 160rpx;
		width: 160rpx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-mr {
		margin-right: 20rpx;
	}


	.tui-flex-pic {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		background: #fff;
		padding: 0 120rpx;
	}

	.tui-flex-pic image {
		width: 32%;
		margin-bottom: 2%;
	}

	.tui-content {
		padding: 0rpx 30rpx 20rpx 120rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		font-weight: 400;
		color: #333;
	}

	.tui-color-gray {
		color: #ccc;
	}

	.tui-pleft {
		padding-left: 120rpx;
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		/* padding-left: 20rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 15px;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 30rpx;
	}

	.pic-box {
		margin-top: 20rpx;
		font-size: 22rpx;
		padding: 10px 20px 20px 14px;
		display: flex;
		flex-wrap: nowrap;
	}

	.pic-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-right: 10px;
		display: inline-block;
	}

	.pic-item image {
		width: 100%;
		height: 100%;
	}

	.pic-item .pic-delete {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		color: #fff;
		line-height: 30rpx;
		top: -15rpx;
		right: -15rpx;
		border-radius: 50%;
		background-color: red;
	}

	.pic-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.pic-item.pic-handle image {
		width: 100rpx;
		height: 100rpx;
	}

	.pic-handle .desc {
		padding-top: 10px;
		font-size: 0.9em;
		color: #9b9b9b;
	}
</style>